// import React from 'react';
import React from './ireact/react';
// import ReactDOM from 'react-dom';
import ReactDOM from './ireact/react-dom';


let globalNumber = 0;
class Counter extends React.Component{
  state = {
    number: 0,
    list: []
  };

  ulRef=React.createRef()

  /** case1*/
  //会在DOM更显前执行, 可以用来获取更新前的一些DOM信息
  getSnapshotBeforeUpdate(prevProps, prevState) {
    return globalNumber++;
  }
  componentDidUpdate(prevProps, prevState, number) {
    console.log('number', number);
    console.log('componentDidUpdate prevProps:',prevProps);
    console.log('componentDidUpdate prevState:',prevState);
  }
  handleClick = ()=>{
    this.setState({number: this.state.number + 1});
  }

  /** case2*/
  /*handleClick2 = ()=>{
    const list = this.state.list;
    this.state.list.push(this.state.list.length);
    this.setState({list});
  }
  //会在DOM更显前执行, 可以用来获取更新前的一些DOM信息
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate');
    return this.ulRef.current.scrollHeight/!*snapshot*!/;
  }
  //↓此时DOM已经更新完毕
  componentDidUpdate(prevProps, prevState, scrollHeight/!*snapshot,即getSnapshotBeforeUpdate返回的那个*!/) {
    console.log('本次添加的高度', `${this.ulRef.current.scrollHeight - scrollHeight}px`);
    console.log('componentDidUpdate prevProps:',prevProps);
    console.log('componentDidUpdate prevState:',prevState);
  }*/

  render() {
    console.log('Counter render');
    return (
      <div>
        <p>{this.state.number}</p>
        <button onClick={this.handleClick}>+</button>
        {/*<button onClick={this.handleClick2}>+li</button>*/}
        <ul ref={this.ulRef}>
          {
            this.state.list.map((item,index)=><li key={index}>{index}</li>)
          }
        </ul>
      </div>
    );
  }
}


ReactDOM.render((
  <Counter name={'计数器'}/>
), document.getElementById('root'));
